<!--基础仪表盘-->

<template>
  <div class="w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <div v-resize="resizeHandle" style="width: 100%; height: 100%;">
      <div :id="'chart-'+component.id+'-'+chartDomNum" class="w-h-full"></div>
    </div>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import ChartCompMixin from '@/mixin/ChartCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  const _this = {
    name: 'BaseGaugeChart', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin, ChartCompMixin],
    attr: {
      version: '2.2',
      configDataTemp: Object.assign({

        // 组件相关配置属性，Echarts图表组件的相关配置属性，必须在chartOption对象下定义
        chartOption: {
          title: PnDesigner.buildTitleConfigData(),
          series: [
            {
              name: '',
              radius: '85%',
              startAngle: 225,
              endAngle: -45,
              clockwise: true,
              min: 0,
              max: 200,
              splitNumber: 10,
              axisLine: {
                show: true,
                lineStyle: {
                  color: [
                    [1, '#2B64FC']
                  ],
                  width: 20,
                  shadowBlur: 0,
                  shadowColor: ''
                }
              },
              splitLine: {
                show: true,
                length: 10,
                lineStyle: {
                  color: '#fff',
                  width: 3,
                  type: 'solid',
                  shadowBlur: 0,
                  shadowColor: ''
                }
              },
              axisTick: {
                show: true,
                splitNumber: 5,
                length: 6,
                lineStyle: {
                  color: '#fff',
                  width: 1,
                  type: 'solid',
                  shadowBlur: 0,
                  shadowColor: ''
                }
              },
              axisLabel: {
                show: true,
                distance: 25,
                color: '#fff',
                fontWeight: 'normal',
                fontSize: 11,
                backgroundColor: '',
                borderColor: '',
                borderWidth: 0,
                borderRadius: 0,
                padding: 0,
                shadowColor: '',
                shadowBlur: 0
              },
              pointer: {
                show: true,
                length: '60%',
                width: 8,
                itemStyle: {
                  color: '',
                  borderColor: '',
                  borderWidth: 0,
                  borderType: 'solid',
                  shadowBlur: 0,
                  shadowColor: '',
                  opacity: 1
                }
              },
              title: {
                show: true,
                offsetCenter: ['0', '-40%'],
                color: '#ffffff',
                fontWeight: 'normal',
                fontSize: 16,
                backgroundColor: '',
                borderColor: '',
                borderWidth: 0,
                borderRadius: 0,
                padding: 0,
                shadowColor: '',
                shadowBlur: 0
              },
              detail: {
                show: true,
                offsetCenter: ['0', '40%'],
                formatter: "(value) => {\n  return value\n}",
                color: '#fff',
                fontWeight: 'normal',
                fontSize: 16,
                backgroundColor: '',
                borderColor: '',
                borderWidth: 0,
                borderRadius: 0,
                padding: 0,
                shadowColor: '',
                shadowBlur: 0
              },
            }
          ]
        }

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [
          {
            field: 'name',
            remark: '数据项名称'
          },
          {
            field: 'value',
            remark: '数据值'
          }
        ],
        ds_resultObj: [
          {
            "name": "分数",
            "value": 80
          }
        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
        ds_useTimer: true, // 是否开启定时器配置，默认不开启
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildEchartCompCustomOption(), PnDesigner.buildFuncCompInteractionConfiguration([
        PnDesigner.buildFuncCompInteractionStreamItem('itemClick', [
          PnDesigner.buildFuncCompInteractionFieldsMapItem('name', '', '数据项名称'),
          PnDesigner.buildFuncCompInteractionFieldsMapItem('value', '', '数据值')
        ])
      ]))
    },
    data() {
      return {}
    },
    mounted() {
      this.init();

      this.setTimer(() => { //定时器，如果当前组件不使用定时器，可以将此段代码删除
        this.init()
      })
    },
    methods: {
      init() {
        this.initDatasource(() => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode(this.launchInteractionStream)
        }, (result) => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode(this.launchInteractionStream)
        });
      },

      launchInteractionStream (params) {
        this.$PnDesigner.launchInteractionStream(this.component.compConfigData, 'itemClick', params.data)
      }
    },
    computed: {
      chartOption () {

        let option = {
          title: PnDesigner.buildTitleChartOption(this.component.compConfigData.chartOption.title),
          tooltip: {
            show: true
          },
          series: [
            {
              type: 'gauge',
              name: this.component.compConfigData.chartOption.series[0].name,
              radius: this.component.compConfigData.chartOption.series[0].radius,
              startAngle: this.component.compConfigData.chartOption.series[0].startAngle,
              endAngle: this.component.compConfigData.chartOption.series[0].endAngle,
              clockwise: this.component.compConfigData.chartOption.series[0].clockwise,
              min: this.component.compConfigData.chartOption.series[0].min,
              max: this.component.compConfigData.chartOption.series[0].max,
              splitNumber: this.component.compConfigData.chartOption.series[0].splitNumber,
              axisLine: {
                show: this.component.compConfigData.chartOption.series[0].axisLine.show,
                lineStyle: {
                  color: this.component.compConfigData.chartOption.series[0].axisLine.lineStyle.color,
                  width: this.component.compConfigData.chartOption.series[0].axisLine.lineStyle.width,
                  shadowBlur: this.component.compConfigData.chartOption.series[0].axisLine.lineStyle.shadowBlur,
                  shadowColor: this.component.compConfigData.chartOption.series[0].axisLine.lineStyle.shadowColor
                }
              },
              splitLine: {
                show: this.component.compConfigData.chartOption.series[0].splitLine.show,
                length: this.component.compConfigData.chartOption.series[0].splitLine.length,
                lineStyle: {
                  color: this.component.compConfigData.chartOption.series[0].splitLine.lineStyle.color,
                  width: this.component.compConfigData.chartOption.series[0].splitLine.lineStyle.width,
                  type: this.component.compConfigData.chartOption.series[0].splitLine.lineStyle.type,
                  shadowBlur: this.component.compConfigData.chartOption.series[0].splitLine.lineStyle.shadowBlur,
                  shadowColor: this.component.compConfigData.chartOption.series[0].splitLine.lineStyle.shadowColor
                }
              },
              axisTick: {
                show: this.component.compConfigData.chartOption.series[0].axisTick.show,
                splitNumber: this.component.compConfigData.chartOption.series[0].axisTick.splitNumber,
                length: this.component.compConfigData.chartOption.series[0].axisTick.length,
                lineStyle: {
                  color: this.component.compConfigData.chartOption.series[0].axisTick.lineStyle.color,
                  width: this.component.compConfigData.chartOption.series[0].axisTick.lineStyle.width,
                  type: this.component.compConfigData.chartOption.series[0].axisTick.lineStyle.type,
                  shadowBlur: this.component.compConfigData.chartOption.series[0].axisTick.lineStyle.shadowBlur,
                  shadowColor: this.component.compConfigData.chartOption.series[0].axisTick.lineStyle.shadowColor
                }
              },
              axisLabel: {
                show: this.component.compConfigData.chartOption.series[0].axisLabel.show,
                distance: this.component.compConfigData.chartOption.series[0].axisLabel.distance,
                color: this.component.compConfigData.chartOption.series[0].axisLabel.color,
                fontWeight: this.component.compConfigData.chartOption.series[0].axisLabel.fontWeight,
                fontSize: this.component.compConfigData.chartOption.series[0].axisLabel.fontSize,
                backgroundColor: this.component.compConfigData.chartOption.series[0].axisLabel.backgroundColor,
                borderColor: this.component.compConfigData.chartOption.series[0].axisLabel.borderColor,
                borderWidth: this.component.compConfigData.chartOption.series[0].axisLabel.borderWidth,
                borderRadius: this.component.compConfigData.chartOption.series[0].axisLabel.borderRadius,
                padding: this.component.compConfigData.chartOption.series[0].axisLabel.padding,
                shadowColor: this.component.compConfigData.chartOption.series[0].axisLabel.shadowColor,
                shadowBlur: this.component.compConfigData.chartOption.series[0].axisLabel.shadowBlur
              },
              pointer: {
                show: this.component.compConfigData.chartOption.series[0].pointer.show,
                length: this.component.compConfigData.chartOption.series[0].pointer.length,
                width: this.component.compConfigData.chartOption.series[0].pointer.width
              },
              itemStyle: {
                color: this.component.compConfigData.chartOption.series[0].pointer.itemStyle.color ?
                    this.component.compConfigData.chartOption.series[0].pointer.itemStyle.color : 'auto',
                borderColor: this.component.compConfigData.chartOption.series[0].pointer.itemStyle.borderColor,
                borderWidth: this.component.compConfigData.chartOption.series[0].pointer.itemStyle.borderWidth,
                borderType: this.component.compConfigData.chartOption.series[0].pointer.itemStyle.borderType,
                shadowBlur: this.component.compConfigData.chartOption.series[0].pointer.itemStyle.shadowBlur,
                shadowColor: this.component.compConfigData.chartOption.series[0].pointer.itemStyle.shadowColor,
                opacity: this.component.compConfigData.chartOption.series[0].pointer.itemStyle.opacity
              },
              title: {
                show: this.component.compConfigData.chartOption.series[0].title.show,
                offsetCenter: this.component.compConfigData.chartOption.series[0].title.offsetCenter,
                color: this.component.compConfigData.chartOption.series[0].title.color,
                fontWeight: this.component.compConfigData.chartOption.series[0].title.fontWeight,
                fontSize: this.component.compConfigData.chartOption.series[0].title.fontSize,
                backgroundColor: this.component.compConfigData.chartOption.series[0].title.backgroundColor,
                borderColor: this.component.compConfigData.chartOption.series[0].title.borderColor,
                borderWidth: this.component.compConfigData.chartOption.series[0].title.borderWidth,
                borderRadius: this.component.compConfigData.chartOption.series[0].title.borderRadius,
                padding: this.component.compConfigData.chartOption.series[0].title.padding,
                shadowColor: this.component.compConfigData.chartOption.series[0].title.shadowColor,
                shadowBlur: this.component.compConfigData.chartOption.series[0].title.shadowBlur
              },
              detail: {
                show: this.component.compConfigData.chartOption.series[0].detail.show,
                offsetCenter: this.component.compConfigData.chartOption.series[0].detail.offsetCenter,
                formatter: eval(this.component.compConfigData.chartOption.series[0].detail.formatter),
                color: this.component.compConfigData.chartOption.series[0].detail.color,
                fontWeight: this.component.compConfigData.chartOption.series[0].detail.fontWeight,
                fontSize: this.component.compConfigData.chartOption.series[0].detail.fontSize,
                backgroundColor: this.component.compConfigData.chartOption.series[0].detail.backgroundColor,
                borderColor: this.component.compConfigData.chartOption.series[0].detail.borderColor,
                borderWidth: this.component.compConfigData.chartOption.series[0].detail.borderWidth,
                borderRadius: this.component.compConfigData.chartOption.series[0].detail.borderRadius,
                padding: this.component.compConfigData.chartOption.series[0].detail.padding,
                shadowColor: this.component.compConfigData.chartOption.series[0].detail.shadowColor,
                shadowBlur: this.component.compConfigData.chartOption.series[0].detail.shadowBlur
              },
              data: []
            }
          ]
        };

        option.series[0].data = this.runCustomFilter(this.component.compConfigData.ds_resultObj);

        // 下面这一段代码用于合并组件的扩展配置，如果组件不需要扩展配置，可以删掉
        option = this.$PnDesigner.mergeChartCustomOption(option, this.component.compConfigData.customOption);

        return option;
      }
    }
  };

  export default _this
</script>

<style scoped>

</style>
